<script setup>
    import { ref, onMounted } from 'vue';
    import { useUserStore } from '@/stores/user.js'
    import { tokenAPI } from '@/api/token'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import router from '@/router';

    const userStore = useUserStore()
    const username = ref('testname')

    onMounted(() => {
        username.value = userStore.getUserInfo().value.username


    })

    async function applyToken() {
        console.log("applyToken");
        try {
            const res = await tokenAPI({ username: userStore.getUserInfo().value.username });
            console.log(res.data.token);
            ElMessageBox.alert(`Token:${res.data.token}`, 'Token', {
                confirmButtonText: '点击复制Token',
                callback: async () => {
                    let token = res.data.token;
                    if (navigator.clipboard) {
                        try {
                            await navigator.clipboard.writeText(token);
                            ElMessage({
                                type: 'success',
                                message: `复制成功`,
                            });
                        } catch (error) {
                            console.error('复制到剪贴板失败:', error);
                            ElMessage({
                                type: 'error',
                                message: `复制失败: ${error.message}`,
                            });
                        }
                    } else {
                        // 旧方法复制文本
                        const textArea = document.createElement("textarea");
                        textArea.value = token;
                        document.body.appendChild(textArea);
                        textArea.select();
                        try {
                            const successful = document.execCommand('copy');
                            if (successful) {
                                ElMessage({
                                    type: 'success',
                                    message: `复制成功`,
                                });
                            } else {
                                ElMessage({
                                    type: 'error',
                                    message: `复制失败`,
                                });
                            }
                        } catch (err) {
                            console.error('复制到剪贴板失败:', err);
                            ElMessage({
                                type: 'error',
                                message: `复制失败: ${err.message}`,
                            });
                        }
                        document.body.removeChild(textArea);
                    }
                },
            });
        } catch (error) {
            console.error('获取 Token 失败:', error);
            ElMessage({
                type: 'error',
                message: `获取 Token 失败: ${error.message}`,
            });
        }
    }
    function logout() {
        console.log("logout")
        userStore.Logout()
        router.replace('/')
    }
</script>

<template>
    <div class="container">
        <div class="info">
            用户名：{{ username }}
        </div>
        <div class="btn">
            <el-button type="success" v-on:click="applyToken">
                获取Token
            </el-button>
        </div>

        <div class="logout">
            <el-button type="primary" v-on:click="logout">
                退出
            </el-button>
        </div>
    </div>


</template>

<style scoped>
    .container {
        height: 100%;
        display: flex;

        align-items: center;

        .logout {
            margin-left: 18px;
        }

        .btn {
            margin-left: auto;
        }

    }
</style>